﻿<div class="sign-up sign-up-by-mobile">
    <div class="sign-up-header">
        <h3>
            注册帐户</h3>
        <p class="help-block">
            asdf</p>
    </div>
    <div class="sign-up-body">
        <ul class="nav nav-tabs">
            <li class="active"><a href="javascrip:void(0);">使用手机号码注册</a></li>
            <li><a href="/signup">使用邮箱注册</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active">
                <div class="row">
                    <div class="col-md-offset-1 col-md-7">
                        <form id="form-sign-up-by-mobile" class="form-horizontal" autocomplete="off" method="post"
                              action="?@(Request.QueryString)">
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <p id="sign-up-message" class="form-control-static">
                                    &nbsp;</p>
                            </div>
                        </div>
                        <div id="form-group-for-mobile" class="form-group">
                            <label class="control-label col-md-2" for="mobile" data-content="使用常用手机号码作为用户名，通过验证后可用于登录和找回密码。"
                                data-original-title="温馨提醒" data-placement="top" data-trigger="hover" data-rel="popover">
                                手机号码
                            </label>
                            <div class="col-md-10">
                                <div class="row">
                                    <div class="col-md-4">
                                        <input type="text" id="mobile" name="mobile" class="form-control input-medium" autocomplete="off"
                                            maxlength="11" required="required" placeholder="手机号码" />
                                    </div>
                                    <div class="col-md-6">
                                        <p class="form-control-static">
                                            <a id="control-authcode" href="javascript:void(0);" onclick="getAuthCode();">获取短信验证码</a>
                                            <span id="control-authcode-timer" style="display: none;"><span id="control-authcode-counter">
                                            </span>秒</span>
                                        </p>
                                    </div>
                                </div>
                                <p id="help-block-for-mobile" class="help-block">
                                    请输入正确的手机号码！</p>
                            </div>
                        </div>
                        <div id="form-group-for-authcode" class="form-group" style="display: none;">
                            <label class="control-label col-md-2" for="authcode">
                                短信验证码
                            </label>
                            <div class="col-md-10">
                                <input type="text" id="authcode" name="authcode" class="form-control input-medium"
                                    maxlength="6" disabled="disabled" required="required" placeholder="请输入短信验证码" />
                                <p id="help-block-for-authcode" class="help-block">
                                    短信验证码30分钟内有效！</p>
                            </div>
                        </div>
                        <div id="form-group-for-password" class="form-group">
                            <label for="password" class="col-md-2 control-label" data-content="为了您的账户安全，请输入6-12位的密码。密码至少两个字母、两个数字、一个特殊字符！（字母区分大小写）"
                                data-original-title="温馨提醒" data-placement="top" data-trigger="hover" data-rel="popover">
                                登录密码</label>
                            <div class="col-md-10">
                                <input id="password" name="password" type="password" class="form-control" maxlength="12"
                                    autocomplete="off" onkeydown="if(event.ctrlKey) return false;" onmousedown="this.oncontextmenu = function() { return false;} "
                                    onpaste="return false" required="required" placeholder="请输入您的登录密码" />
                                <p id="help-block-for-password" class="help-block">
                                    6-12位，至少两个字母、两个数字、一个特殊字符！</p>
                            </div>
                        </div>
                        <div id="form-group-for-repassword" class="form-group">
                            <label for="repassword" class="col-md-2 control-label" data-original-title="温馨提醒"
                                data-content="为了您的账户安全，请输入6-12位的密码。密码至少两个字母、两个数字、一个特殊字符！（字母区分大小写）" data-placement="top"
                                data-trigger="hover" data-rel="popover">
                                确认密码</label>
                            <div class="col-md-10">
                                <input id="repassword" name="repassword" type="password" class="form-control" maxlength="12"
                                    autocomplete="off" onkeydown="if(event.ctrlKey) return false;" onmousedown="this.oncontextmenu = function() { return false;} "
                                    onpaste="return false" required="required" placeholder="请再次输入您的登录密码" />
                                <p id="help-block-for-repassword" class="help-block">
                                    6-12位，至少两个字母、两个数字、一个特殊字符！
                            </div>
                        </div>
                        <div id="form-group-for-protocol" class="form-group">
                            <div class="col-md-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label>
                                        <input id="protocol" name="protocol" type="checkbox" />
                                        我已阅读并同意<a href="/">《用户注册协议》</a>
                                    </label>
                                </div>
                                <p id="help-block-for" class="help-block">
                                </p>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-3">
                                <input id="authId" name="authId" type="hidden" />
                                <button id="btn-sign-up" class="btn btn-primary btn-lg" type="submit" data-default-text="同意协议并注册"
                                    data-loading-text="提交数据中...">
                                    同意协议并注册</button>
                            </div>
                            <div class="col-md-5">
                            </div>
                        </div>
                        </form>
                    </div>
                    <div class="col-md-4">
                        <div class="passport-register-quick">
                            <div class="passport-register-quick-header">
                            </div>
                            <div class="passport-register-quick-container">
                                中国大陆手机用户，<br />
                                编辑短信”<em>SK</em>“ 发送到：
                                <br />
                                <span class="mobile">1069099988</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sign-up-footer">
    </div>
</div>
@section css{
    <style type="text/css">
        
    </style>
}
@section js{
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script type="text/javascript" src="http://static.ayatta.com/js/jquery.validate.extend.js"></script>
    <script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-typeahead.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[data-rel="popover"]').popover();
            $("#form-sign-up-by-mobile").validate({
                rules: { 'mobile': { required: true, rangelength: [11, 11], mobile: true, remote: { url: "/global/usernotexist", type: "post", data: { name: function () { return $("#mobile").val(); } }} }, 'authcode': { required: true, rangelength: [6, 6], remote: { url: "/global/authcodevalidate", type: "post", data: { param: function () { return $("#authId").val(); }, group: 0, mobile: function () { return $("#mobile").val(); }, code: function () { return $("#authcode").val(); } }} }, 'password': { required: true, password: true }, 'repassword': { required: true, password: true, equalTo: "#password" }, 'protocol': { required: true} },
                messages: { 'mobile': { required: '请输入正确的手机号码！', rangelength: '请输入正确的手机号码！', mobile: '请输入正确的手机号码！', remote: '该手机号码已被使用，请换一个！' }, 'authcode': { required: '请输入您收到的短信验证码！', rangelength: '输入您收到的6位短信验证码！', remote: '短信验证码不正确或已过期！（30分钟内有效）' }, 'password': { required: '请输入您的登录密码！', password: '6-12位，至少两个字母、两个数字、一个特殊字符！' }, 'repassword': { required: '请再次输入您的登录密码！', password: '6-12位，至少两个字母、两个数字、一个特殊字符！', equalTo: "两次输入的密码不一致！" }, 'protocol': { required: '请接受服务条款！'} },
                submitHandler: function (form) {
                    $('#btn-sign-up').button('loading');
                    var param = $(form).serialize();

                    $.postJSON(form.action, param, function (result) {
                        if (result.Status == true) {
                            alert(0);
                        } else {
                            $('#btn-sign-up').button('default');
                            $("#sign-up-message").html(result.Message);
                            $("#sign-up-message").addClass('text-danger').html(result.Message);
                            setTimeout(function () {
                                $("#sign-up-message").removeClass('text-danger').html('&nbsp;');
                            }, 2000);
                        }
                    });
                    return false;
                },
                validClass: "success",
                errorClass: "invalid",
                errorElement: "span",
                errorPlacement: function (error, element) {
                    var id = $(element).attr('id');
                    $("#help-block-for-" + id).html(error);
                },
                highlight: function (element, errorClass, validClass) {
                    var id = element.id;
                    $(element).removeClass(validClass).addClass(errorClass);
                    $("#form-group-for-" + id).removeClass('has-success').addClass('has-error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    var id = element.id;
                    $(element).removeClass(errorClass).addClass(validClass);
                    $("#help-block-for-" + id).html('&nbsp;');
                    $("#form-group-for-" + id).removeClass('has-error').addClass('has-success');
                }
            });
        });

        function reSignUp() {
            $('#btn-sign-up').button('default');
            document.getElementById('form-sign-up-by-email').reset();
            $('#dialog-sign-up').modal('hide');
        }

        function updateTimer() {
            var i = parseInt($("#control-authcode-counter").text());
            if (i == 0) {
                $("#control-authcode-timer").hide();
                $("#control-authcode").show();
                return;
            }
            $("#control-authcode-counter").text(i - 1);
            setTimeout(updateTimer, 1000);
        }

        function getAuthCode() {
            var mobile = document.getElementById('mobile').value;
            if (!mobile.isMobile()) {
                $('#help-block-for-mobile').html("<span class='invalid'>请输入正确的手机号码！<span>");
                $("#form-group-for-mobile").removeClass('has-success').addClass('has-error');
                $("#mobile").removeClass('success').addClass('invalid');
                $("#mobile").fadeOut(function () { $("#mobile").fadeIn(); });
            } else {
                $.postJSON('/global/authcode/0', { mobile: mobile }, function (result) {
                    if (result.Status == true) {
                        $("#authId").val(result.Data);
                        $("#control-authcode").hide();
                        $("#form-group-for-authcode").show();
                        document.getElementById('authcode').removeAttribute('disabled');
                        document.getElementById('mobile').setAttribute('readonly', 'readonly');
                        var info = "<span class='green'>我们已向该手机发送短信验证码，请注意查收！<span>";
                        $('#help-block-for-mobile').html(info);
                        $("#control-authcode-counter").text(120);
                        $("#control-authcode-timer").show();
                        updateTimer();
                    } else {
                        var error = $.format("<span class='invalid'>{0}<span>", result.Message);
                        $('#help-block-for-mobile').html(error);
                        $("#form-group-for-mobile").removeClass('has-success').addClass('has-error');
                        $("#mobile").removeClass('success').addClass('invalid');
                        $("#mobile").fadeOut(function () { $("#mobile").fadeIn(); });
                    }
                });
            }
        }
    </script>
}
